<template>
    <div class="record-display-wrapper">
        <div >
            <ol class="record-display-list">
                <li v-for="(group, index) in result" :key="index">
                    <div class="date-cutoff-line">
                        {{realDate(group.title)}}
                    </div>
                    <ol>
                        <li v-for="(item, index) in group.records" :key="item.hashCode">
                            <div class="record-item">
                                <Record :notFirst="index !== 0" :notLast="index !== group.records.length - 1" :record="item"/>
                            </div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';
    import Record from '@/components/Record.vue';
    import dayjs from 'dayjs';
    import weekOfYear from 'dayjs/plugin/weekOfYear'

    @Component({
        components: {
            Record
        },
        mounted() {
            this.$store.commit('fetchRecords');
        }
    })
    export default class RecordDisplay extends Vue {

        @Prop(String) range: string | undefined;

        get recordList() {
            console.log('recordList更新了!')
            const recordList = (this.$store.state as RootState).recordList;
            recordList.sort((a, b) => dayjs(b.time).valueOf() - dayjs(a.time).valueOf())
            return recordList;
        }

        realDate(date: string): string {
            if (this.range === 'day') {
                return this.realDay(date)
            } else if (this.range === 'week') {
                return this.realWeek(date)
            } else if (this.range === 'month') {
                return this.realMonth(date)
            } else {
                return date
            }
        }

        realDay(date: string): string {
            if (dayjs(date).isSame(dayjs(), 'day')) {
                return '今天'
            } else if (dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day')){
                return '昨天'
            } else if (dayjs(date).isSame(dayjs().subtract(2, 'day'), 'day')) {
                return '前天'
            } else {
                return date
            }
        }

        realWeek(date: string): string {
            dayjs.extend(weekOfYear)
            if (date === `${dayjs().year()}年-第${dayjs().week()}周`) {
                return '本周'
            } else if (date === `${dayjs().subtract(7, 'day').year()}年-第${dayjs().subtract(7, 'day').week()}周`){
                return '上周'
            } else {
                return date
            }
        }

        realMonth(date: string): string {
            if (dayjs(date).isSame(dayjs(), 'month')) {
                return '本月'
            } else if (dayjs(date).isSame(dayjs().subtract(1, 'month'), 'day')){
                return '上月'
            } else {
                return date
            }
        }

        // get totalOutcome(): number {
        //     return this.recordList.reduce((acc, cur) => {
        //         return acc + (cur.type === '-' ? cur.amount : 0)
        //     }, 0)
        // }
        //
        // get totalIncome(): number {
        //     return this.recordList.reduce((acc, cur) => {
        //         return acc + (cur.type === '+' ? cur.amount : 0)
        //     }, 0)
        // }

        get result() {
            const recordList = this.recordList;
            const rangeRecords: {title: string; records: RecordItem[]}[] = []

            recordList.forEach(record => {
                const date = dayjs(record.time);
                if (rangeRecords.length === 0) {
                    let formatDate = ''
                    if (this.range === 'day') {
                        formatDate = date.format('YYYY-MM-DD')
                    } else if (this.range === 'week') {
                        dayjs.extend(weekOfYear)
                        formatDate = `${date.year()}年-第${date.week()}周`
                    } else if (this.range === 'month') {
                        formatDate = `${dayjs(date).format('YYYY-MM')}`
                    }
                    rangeRecords.push({
                        title: formatDate,
                        records: [record]
                    })

                } else {
                    let alreadyHad = false
                    let formatDate = ''
                    rangeRecords.forEach(item => {
                        if (this.range === 'day') {
                            if (dayjs(item.title).isSame(date, 'day')) {
                                item.records.push(record)
                                alreadyHad = true
                                return
                            }
                            formatDate = date.format('YYYY-MM-DD')
                        } else if (this.range === 'week') {
                            dayjs.extend(weekOfYear)
                            if (item.title === `${date.year()}年-第${date.week()}周`) {
                                item.records.push(record)
                                alreadyHad = true
                                return
                            }
                            formatDate = `${date.year()}年-第${date.week()}周`
                        } else if (this.range === 'month') {
                            if (item.title === `${dayjs(date).format('YYYY-MM')}`) {
                                item.records.push(record)
                                alreadyHad = true
                                return
                            }
                            formatDate = `${dayjs(date).format('YYYY-MM')}`
                        }
                    })
                    if (!alreadyHad) {
                        rangeRecords.push({
                            title: formatDate,
                            records: [record]
                        })
                    }
                }
            })

            return rangeRecords
        }
    }
</script>

<style lang="scss" scoped>

    @import "~@/assets/style/helper.scss";

    .record-display-list {
        display: flex;
        flex-direction: column;
    }

    .type-tab {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;

        li {
            display: inline-block;
            width: 50vw;
            height: 40px;
            line-height: 40px;
            font-size: 1.1em;
            font-family: $font-hei;
            font-weight: bold;
            position: relative;

            &:first-child {
                color: $color-green;
            }
            &:last-child {
                color: $color-red;
            }
        }
    }

    .date-cutoff-line {
        color: $color-orange;
        line-height: 50px;
        position: relative;

        &::before,
        &::after{
            content: '';
            height: 2px;
            width: 25vw;
            background: $color-orange;
            position: absolute;
            top: 24px;
        }

        &::before {
            left: 10vw;
        }

        &::after {
            right: 10vw;
        }
    }

</style>